<template>
  <div class="user-inside-view">
    <div class="top-nav">
      <div class="goback" @click="goBack"><van-icon name="arrow-left" /></div>
      <div class="icon"><van-icon name="ellipsis" /></div>
    </div>
    <div class="top-user" v-if="userContentData != null">
      <div class="layer"></div>
      <div
        class="user-bg"
        :style="'backgroundImage:url(' + userContentData.medium + ')'"
      >
        <div class="bg-layer"></div>
      </div>
      <div class="user-icon">
        <div class="imgbox">
          <img class="auto-img" :src="userContentData.thumb" alt="" />
        </div>
        <div class="icon-box">
          <div class="icon chat">
            <van-icon name="chat-o" style="margin-right: 5px" />
            <span>聊天</span>
          </div>
          <div class="icon follow" @click="getFollowState(userContentData)">
            <van-icon name="plus" style="margin-right: 5px" />
            <span>{{ userContentData.isFollow ? "已关注" : "关注" }}</span>
          </div>
        </div>
      </div>
      <div class="user-name">
        <div class="name">{{ userContentData.login }}</div>
        <div class="male" :class="{ manstyle: userContentData.gender == 'M' }">
          {{
            userContentData.gender == "M"
              ? "♂"
              : userContentData.gender == "F"
              ? "♀"
              : ""
          }}
          {{ userContentData.age }}
        </div>
      </div>
      <div class="user-tag">
        <div class="tag">IP:{{ userContentData.ip_location }}</div>
        <div class="tag">{{ userContentData.haunt }}</div>
        <div class="tag">{{ userContentData.astrology }}</div>
      </div>
      <div class="user-data">
        <div class="get liked"><span>105.1K</span> 获赞</div>
        <div class="get follow"><span>150</span> 关注</div>
        <div class="get fans"><span>222</span> 粉丝</div>
      </div>
    </div>
    <div
      class="content-wrap"
      ref="contentWrap"
      @scroll.passive="contentWrapScroll"
    >
      <div
        class="content-list-wrap"
        v-for="(item, index) in contentData"
        :key="item.id"
      >
        <VideoCom
          :allContentData="contentData"
          :scrollTop="scrollTop"
          :contentData="item"
          :isAutoplay="index == 0 ? true : item.isAutoplay"
          :loading="loading"
          :isFollow="item.isFollow"
          :isDislike="item.isDislike"
          :isLike="item.isLike"
          :index="index"
          @getVideoHeight="getVideoHeight(index, $event)"
          @getFollowState="getFollowState(item)"
          @getLikeState="getLikeState(item)"
          @getDislikeState="getDislikeState(item)"
          @addShareCount="addShareCount(item)"
          @deleteData="deleteData(item)"
          @goTocomment="goTocomment(item)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getUserDetail, getUserContent } from "@/api/user";
import { throttle } from "@/utils/throttle";
import VideoCom from "@/components/HomeCom/VideoCom.vue";
export default {
  name: "userInside",
  components: {
    VideoCom,
  },
  data() {
    return {
      userContentData: null,
      contentData: [],
      //总高度
      videoTotalHeight: 0,
      //加载状态
      loading: true,
      //定时器延迟拿取数据
      timer: null,
      //返回顶部的按钮显示状态
      goToTopIconState: false,
      //滚动距离
      scrollTop: 0,
      isFollow: false,
    };
  },
  created() {
    this.getUserDetailData();
    this.getUserContentData();
  },
  activated() {
    //定时器延迟拿取数据
    this.timer = setTimeout(() => {
      this.getFollowedData();
      this.timer = null;
    }, 100);
  },
  watch: {
    //监听滚动自动播放
    // scrollTop(newval, oldval) {
    //   let videoBottom = null;
    //   if (this.videoTotalHeight > newval) {
    //     videoBottom = this.videoTotalHeight - newval;
    //   }
    //   // console.log(newval);
    //   if (this.contentData.length > 0) {
    //     let autoplayIndex = Math.round(
    //       ((newval - 100 > 0 ? newval - 100 : 0) / this.videoTotalHeight) * 10
    //     );
    //     this.contentData.forEach((item, index) => {
    //       if (autoplayIndex == index) {
    //         item.isAutoplay = true;
    //       } else {
    //         item.isAutoplay = false;
    //       }
    //     });
    //   }
    //   if (
    //     (videoBottom > 0 && videoBottom < 500 && newval > oldval) ||
    //     videoBottom == null
    //   ) {
    //     if (this.loading) {
    //       this.loading = false;
    //       // this.getUserContentData(1);
    //     } else if (!this.loading && newval >= this.videoTotalHeight) {
    //       this.$toast({
    //         message: "没有更多了哦~",
    //         position: "bottom",
    //       });
    //     }
    //   }
    //   // console.log(this.contentData);
    // },
    // //滚到距离顶部一段距离后加载新数据
    // loading(newval) {
    //   if (newval == false) {
    //     this.videoTotalHeight = 0;
    //   }
    // },
    "contentData.length"() {
      this.timer = setTimeout(() => {
        this.getFollowedData();
        this.timer = null;
      }, 100);
    },
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    getUserDetailData() {
      getUserDetail({ axios: this.$axios }).then((data) => {
        data.data.userdata["isFollow"] = false;
        this.userContentData = data.data.userdata;
      });
    },
    getUserContentData() {
      getUserContent({ axios: this.$axios }).then(({ data }) => {
        data.items.forEach((item) => {
          item["isAutoplay"] = false;
          item["isFollow"] = false;
          item["isLike"] = false;
          item["isDislike"] = false;
        });
        this.contentData.push(...data.items);
        // console.log(this.contentData);
      });
    },
    //获取所有内容的高度
    getVideoHeight(index, val) {
      if (this.lastVideoIndex < index) {
        this.lastVideoIndex = index;
      }
      if (this.lastVideoIndex == index) {
        this.lastVideoHeight = val;
      }
      this.videoTotalHeight += val;
    },
    //关注
    getFollowState(item) {
      item.isFollow = !item.isFollow;
      let followedData = JSON.parse(
        window.localStorage.getItem("followedData")
      );
      let idArr = [];
      followedData.forEach((item) => {
        idArr.push(item.id);
      });
      if (item.isFollow && idArr.indexOf(item.id) == -1) {
        followedData.push(item);
        window.localStorage.setItem(
          "followedData",
          JSON.stringify(followedData)
        );
      } else {
        // console.log(followedData.indexOf(item));
        followedData.forEach((item2, index) => {
          if (item2.id == item.id) {
            followedData.splice(index, 1);
            window.localStorage.setItem(
              "followedData",
              JSON.stringify(followedData)
            );
          }
        });
      }
    },
    //点赞
    getLikeState(item) {
      item.isLike = !item.isLike;
      if (item.isLike) {
        item.isDislike = false;
        item.votes.up++;
      } else {
        item.votes.up--;
      }
    },
    //踩
    getDislikeState(item) {
      item.isDislike = !item.isDislike;
      if (item.isDislike && item.isLike) {
        item.isLike = false;
        item.votes.up--;
      }
    },
    //分享
    addShareCount(item) {
      item.share_count++;
    },
    //删除
    deleteData(item) {
      this.$dialog
        .confirm({
          title: "确定要删除吗?",
        })
        .then(() => {
          // on confirm
          this.contentData.forEach((item2, index) => {
            if (item2 == item) {
              this.contentData.splice(index, 1);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //获取已关注
    getFollowedData() {
      let followedData = JSON.parse(
        window.localStorage.getItem("followedData")
      );
      let followedDataId = [];
      followedData.forEach((item) => {
        followedDataId.push(item.id);
      });
      if (followedDataId.indexOf(this.userContentData.uid) != -1) {
        this.userContentData.isFollow = true;
      } else {
        this.userContentData.isFollow = false;
      }
    },
    //跳转评论详情页
    goTocomment(item) {
      window.localStorage.setItem("commentContentData", JSON.stringify(item));
      let dataId = item.id;
      if (dataId != 125654473 && dataId != 125657703) {
        dataId = 125654473;
      }
      this.$router.push(`/comment?id=${dataId}`);
    },
    //home的滚动方法
    contentWrapScroll: throttle(function () {
      this.scrollTop = this.$refs.contentWrap.scrollTop;
      if (this.scrollTop >= 150) {
        this.goToTopIconState = true;
      } else {
        this.goToTopIconState = false;
      }
    }, 500),
  },
};
</script>

<style lang="scss" scoped>
.user-inside-view {
  padding: 10px;
  .top-nav {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    color: #fff;
    .goback {
      font-size: 20px;
    }
    .icon {
      font-size: 25px;
    }
  }
  .top-user {
    color: #fff;
    position: relative;
    .user-bg {
      width: 100vw;
      height: 280px;
      background: no-repeat center center;
      background-size: cover;
      z-index: -1;
      position: fixed;
      left: 0;
      top: 0;
      .bg-layer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.35);
        z-index: 1;
      }
    }
    .user-icon {
      margin-top: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .imgbox {
        width: 65px;
        height: 65px;
        border-radius: 999px;
        border: 3px solid #fff;
        box-sizing: border-box;
        overflow: hidden;
      }
      .icon-box {
        display: flex;
        .icon {
          width: 80px;
          height: 33px;
          border-radius: 999px;
          margin-right: 10px;
          text-align: center;
          line-height: 33px;
          font-size: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            display: block;
            font-size: 13px;
          }
          &:last-of-type {
            margin-right: 0;
          }
          &.chat {
            background-color: rgb(85, 101, 116);
          }
          &.follow {
            background-color: rgb(205, 176, 12);
            color: #000;
          }
        }
      }
    }
    .user-name {
      display: flex;
      align-items: center;
      margin: 20px 0;
      .name {
        margin-right: 5px;
        font-size: 16px;
        font-weight: 600;
      }
      .male {
        width: 40px;
        height: 16px;
        text-align: center;
        line-height: 16px;
        background-color: rgb(251, 109, 142);
        border-radius: 999px;
        &.manstyle {
          background-color: rgb(25, 140, 228);
        }
      }
    }
    .user-tag {
      display: flex;
      align-items: center;
      .tag {
        margin-right: 10px;
      }
    }
    .user-data {
      display: flex;
      align-items: center;
      margin-top: 20px;
      span {
        font-size: 20px;
      }
      .get {
        margin-right: 20px;
      }
    }
  }
  .content-wrap {
    width: 100vw;
    height: calc(100vh - 290px);
    position: relative;
    top: 10px;
    left: -10px;
    background-color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: auto;
    padding: 20px 10px 10px;
    box-sizing: border-box;
  }
}
</style>